<template>
  <div>

    <div class="header">

      <div style="margin-right:20px">
        <Button class="button" type="info" @click="back">返回</Button>
      </div>
    </div>

    <!-- 表单 -->
    <Table border :columns="addUser" :data="list">
      <!-- 名字 -->
      <template slot-scope="{ row }" slot="tname">
        <strong>{{ row.tname }}</strong>
      </template>、

      <!-- 日期 -->
      <template slot-scope="{ row }" slot="register_time">
         <span>{{ row.register_time | dateformat('YYYY-MM-DD') }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 8px" @click="show(index)">编辑</Button>
        <Button type="error" size="small" style="margin-right: 8px"  @click="remove(index)" >删除</Button>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formItem: {
        input: ''
      },
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        account: undefined,
        nackname: undefined,
        sort: '+id'
      },
      // 增加用户
      // addUser: {
      //   id: undefined,
      //   account: '',
      //   name: '',
      //   age: '',
      //   sex: '',
      //   email: ''
      // },
      addUser: [
        {
          title: '姓名',
          slot: 'tname'
        },
        {
          title: '身份证',
          key: 'identity'
        },
        {
          title: '绑定时间',
          slot: 'register_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center'
        }
      ],
      list: [ ]
    }
  },
  created () {
    console.log('初始化')
    this.getList()
  },
  methods: {

    // 获取数据
    getList () {
      let user_id = this.$route.params.user_id
      this.listLoading = true
      // 发起请求
      this.$http.get('/getUserInfoList/' + user_id)
        .then((e) => { // 处理请求返回的结果
          console.log(e.data)
          this.list = e.data.data
        })
        .catch((e) => { // 处理请求发生的异常
          console.log(e)
        })
    },
    // 模糊查询
    likeQuerying () {
      const account = this.listQuery.account
      const nackname = this.listQuery.nackname

      console.log(account)
      console.log(nackname)
      console.log(status)
      // 发起请求
      this.$http({
        url: '/likeQuerying', // 请求地址
        method: 'post', // 设置请求方式
        data: {
          account: account,
          nackname: nackname,
          status: [0, 3]
        }// 把注册参数放进请求中
      })
        .then((e) => { // 处理请求返回的结果
          console.log(e.data)
          this.list = e.data
          this.listLoading = false
        })
        .catch((e) => { // 处理请求发生的异常
          console.log(e)
        })
    },

    resetForm () {
      this.addUser = {
        id: undefined,
        account: '',
        name: '',
        age: '',
        sex: '',
        email: ''
      }
    },
    show (index) {
      this.$Modal.info({
        title: '修改'

      })
    },
    remove (index) {
      let id = this.list[index].id

      this.$Modal.confirm({
        title: '确认对话框标题',
        content: '此操作将永久删除该用户, 是否继续?',
        onOk: () => {
        //  this.$Message.info('点击了确定')
          this.$http({
            url: '/deleteUser/' + id, // 请求地址
            method: 'get', // 设置请求方式
            data: {}

          }).then(() => {
            this.dialogFormVisible = false
            this.list.splice(index, 1)
            this.total = this.total - 1
            this.$Message.info('删除成功')
          })
        },
        onCancel: () => {
          // this.$Message.info('点击了取消')
        }
      })
    },
    back () {
      this.$router.push({
        name: 'common'
      })
    },
    // 增加用户
    toAdd () {
      console.log('增加用户')
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      // 关闭时清除
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      // this.$router.replace({
      //   path: 'add'
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.button {
  margin: 10px;
}
.header{
  display: flex;
  align-items: center;
}
.header .input{
  margin-top:10px
}
</style>
